import { formatDate } from "date-fns";
import type { Payload } from "recharts/types/component/DefaultTooltipContent";
import { Badge } from "@/components/ui/badge";
import { Separator } from "../ui/separator";

interface Props {
  active?: boolean;
  payload?: Payload<number, string>[];
}

export function PassedTrendingTooltip({ active, payload }: Props) {
  const isVisible = active && payload && payload.length;
  if (isVisible) {
    const data = payload[0].payload;
    return (
      <div className="flex flex-col gap-1 rounded-lg bg-background p-2 text-xs">
        <p className="uppercase">{`${formatDate(new Date(data.start), "yyyy-MM-dd HH:mm:ss")}`}</p>
        <Separator className="my-1" />
        <Badge className="flex w-full items-center justify-between gap-6">
          <p className="uppercase">passed</p>
          <p>{data.passed} %</p>
        </Badge>
        <Badge className="flex w-full items-center justify-between gap-6" variant="destructive">
          <p className="uppercase">failed</p>
          <p>{(data.failed + data.skipped + data.broken + data.unknown).toFixed(2)} %</p>
        </Badge>
      </div>
    );
  }
}

export function IssueDistributionTooltip({ active, payload }: Props) {
  const isVisible = active && payload && payload.length;
  if (isVisible) {
    const data = payload[0].payload;
    return (
      <div className="flex flex-col gap-1 rounded-lg bg-background p-2 text-xs">
        <p className="uppercase">{`${formatDate(new Date(data.start), "yyyy-MM-dd HH:mm:ss")}`}</p>
        <Separator className="my-1" />
        <Badge className="flex w-full items-center justify-between gap-6">
          <p className="uppercase">bug</p>
          <p>{data.bug} </p>
        </Badge>
        <Badge className="flex w-full items-center justify-between gap-6" variant="destructive">
          <p className="uppercase">script</p>
          <p>{data.script} </p>
        </Badge>
        <Badge className="flex w-full items-center justify-between gap-6" variant="secondary">
          <p className="uppercase">env</p>
          <p>{data.env} </p>
        </Badge>
        <Badge className="flex w-full items-center justify-between gap-6" variant="outline">
          <p className="uppercase">todo</p>
          <p>{data.todo} </p>
        </Badge>
      </div>
    );
  }
}

export function PassedDonutTooltip({ active, payload }: Props) {
  const isVisible = active && payload && payload.length;
  if (isVisible) {
    const data = payload[0].payload;
    return (
      <Badge className="flex w-full items-center justify-between gap-6" variant="secondary">
        <p className="uppercase">{data.status}</p>
        <p>{data.value} </p>
      </Badge>
    );
  }
}
